<template>
	<view class="project_gk_view">
		<u-navbar
			ref="navbar"	
			back-icon-name="arrow-leftward" 
			title="项目概况"
			:background="{
				background: '#5C77FF',
			}"
			title-color="#ffffff"
			back-icon-color="#ffffff">
		</u-navbar>
		<view class="searchContainer">
			<view>
				<u-input v-model="query" height="60" type="select" :border="true" @click="levelShow = true" :custom-style="{
					width:'60px',
					marginRight:'0',
				}"/>
				<u-action-sheet :list="actionSheetList2" v-model="levelShow" @click="actionSheetCallback"></u-action-sheet>
			</view>	
			<u-search placeholder="请输入关键字" v-model="keyword" bg-color='#fff' border-color='#828282' @search="searchProject" @custom="searchProject"></u-search>
		</view>
		<view class="content">
			<view class="content_tab">
				<TabsCp
					:tabList="tabs"
					:currentTab="tabs[currentIndex]"
					@change='changeLevel'>
				</TabsCp>
			</view>
			<view class="content_count">
				<view class="content_count_left">
					<view class="content_count_left_item">
						<view class="content_count_left_item_title">
							{{totalSize}}
						</view>
						<view class="content_count_left_item_content">
							项目总数
						</view>
					</view>
					<view class="content_count_left_item">
						<view class="content_count_left_item_title">
							{{doingNum || '0'}}
						</view>
						<view class="content_count_left_item_content">
							在建
						</view>
					</view>
					<view class="content_count_left_item">
						<view class="content_count_left_item_title">
							{{completeNum || '0'}}
						</view>
						<view class="content_count_left_item_content">
							已完工
						</view>
					</view>
					<view class="content_count_left_item">
						<view class="content_count_left_item_title">
							{{overTimeNum || '0'}}
						</view>
						<view class="content_count_left_item_content">
							已超时
						</view>
					</view>
				</view>
			</view>
			<view class="content_tab2">
				<TabsCp
					:tabList="tab2s"
					:currentTab="tab2s[currentIndex2]"
					@change='changeTab2'>
				</TabsCp>
			</view>
			<view 
				:style="{
					boxSizing: 'border-box',
					width:'100vw',
					paddingTop:'5px',
					height:`calc(100vh - 160px - ${navbarHeight}px - 50px)`,
					overflow:'auto',
					backgroundColor:'#ffffff',
				}"
				v-if="tabs[currentIndex] == '省级' && !show">
				<EditOther
					@onClose="show = true"
					level='省级'>
				</EditOther>
			</view>
			<view
				:style="{
					boxSizing: 'border-box',
					width:'100vw',
					paddingTop:'5px',
					height:`calc(100vh - 160px - ${navbarHeight}px - 50px)`,
					overflow:'auto',
					backgroundColor:'#ffffff',
				}"
				v-if="tabs[currentIndex] == '市级' && !show">
				<EditOther
					@onClose="show = true"
					level='市级'>
				</EditOther>
			</view>
			<view
				:style="{
					boxSizing: 'border-box',
					width:'100vw',
					paddingTop:'5px',
					height:`calc(100vh - 160px - ${navbarHeight}px - 50px)`,
					overflow:'auto',
					backgroundColor:'#ffffff',
				}"
				v-if="tabs[currentIndex] == '区级' && !show">
				<EditOther2
					@onClose="show = true"
					level='区级'>
				</EditOther2>
			</view>
			<scroll-view
				v-if="show"
				:style="{
					boxSizing: 'border-box',
					width:'100vw',
					paddingTop:'5px',
					height:`calc(100vh - 160px - ${navbarHeight}px - 50px)`,
				}"
				scroll-y="true" 
				class="scroll-Y"
				:lower-threshold = "10"
				@scrolltolower = "toBottom">
				<view>
					<ProjectItemCp
						v-for="(item) in filterList"
						:key="item.id"
						:itemData="item">
					</ProjectItemCp>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
//项目概括页面
import TabsCp from "@/components/public/Tabs.vue";
import ProjectItemCp from "@/components/public/ProjectItem.vue";
import EditOther from "@/components/projectGk/EditOther.vue";
import EditOther2 from "@/components/projectGk/EditOther2.vue";
export default {
	name:'ProjectGkView',
	components:{TabsCp,ProjectItemCp,EditOther,EditOther2},
	data() { 
		return {
			show:true,
			navbarHeight:68,  //默认为68
			currentIndex:0,  //当前选择的tab索引
			totalSize:0,
			tabs:["全部","省级","市级","区级","债券","中省预算","三比三看"],
			currentIndex2:-1,  //当前选择的tab索引
			tab2s:["续建","新开工","加快前期"],
			levelShow:false,
			dataList:[],
			filterList:[],
			doingNum:'',
			completeNum:'',
			overTimeNum: '',
			creater:'',
			query:'行业',
			actionSheetList2: [
				{
					text: '行业'
				},
				{
					text: '领导'
				},
				{
					text: '单位'
				},
				{
					text:'项目'
				}
			],
			page:1,
			size:10,
			keyword:'',
		};
	},
	watch:{
		currentIndex(newValue){  //当当前选项发生变化时
			newValue = this.tabs[newValue];
			switch(newValue){
				case '省级':case '市级':case '区级':
					this.show = false;
					break;
				default:
					this.show = true;
			}
		},
	},
	onLoad(options){  //获取页面跳转传递的参数
	    let level = options.level || '';
		if(this.tabs.includes(level)){  //如果有所选标签的话，显示所选标签
			this.currentIndex = this.tabs.indexOf(level);
		}
		this.creater = options.creater || '';
		let type;
		switch(options.type){
			case 'company':
				type = '单位';
				break;
			case 'companyLeader':
				type = '领导';
				break;
			case 'industry':
				type = '行业';
				break;
		}
		let name = options.name;
		if(type) this.query = type;
		if(name) this.keyword = name;
	},
	//下拉刷新
	onPullDownRefresh() {
		this.dataList = []
		this.keyword = ''
		this.page = 1
		this.getAllProject()
	},
	mounted(){
		this.navbarHeight = this.$refs.navbar.navbarHeight + this.$refs.navbar.statusBarHeight;
		this.getAllProject()
	},
	methods:{
		changeTab2(value){
			this.page = 1;
			this.dataList = [];
			this.currentIndex2 = value;
			this.getAllProject();
		},
		getAllProject(){  //获取所有项目
			let data = {
				page:this.page,
				size:this.size,
				creater:this.creater,
			}
			if(this.currentIndex !== 0){  //表示不是全部
				data.level = this.tabs[this.currentIndex];
			}
			if(this.keyword){
				// let type;
				// switch(this.query){
				// 	case '单位':
				// 		type = 'company';
				// 		break;
				// 	case '领导':
				// 		type = 'companyLeader';
				// 		break;
				// 	case '行业':
				// 		type = 'industry';
				// 		break;
				// }
				data.type = this.query;
				data.name = this.keyword
			}
			if(this.currentIndex2 != -1){
				data.projectType = this.tab2s[this.currentIndex2];
			}
			uni.showLoading({
				title: '加载中'
			});
			this.$ajax({
				url: '/wx/project',
				method: 'GET',
				data:data,
				success: res => {
					if(res.data.state == 200){
						res.data.data.pages.list.forEach(item =>{
							this.dataList.push(item)
						})
						this.dataList.forEach(item =>{
							let nowDate = new Date()
							let totalDays = this.getDaysBetween(item.expectStartTime,item.expectEndTime)
							let nowDays = this.getDaysBetween(item.expectStartTime,nowDate)
							this.$set(item,'totalDays',totalDays)
							this.$set(item,'nowDays',nowDays)
						});
						this.filterList = this.dataList;
						// if(this.currentIndex == 0){
						// 	this.filterList = this.dataList
						// }else if(this.currentIndex == 1){
						// 	this.filterList = this.dataList.filter(item =>{
						// 		return item.level == '省级'
						// 	})
						// }else if(this.currentIndex == 2){
						// 	this.filterList = this.dataList.filter(item =>{
						// 		return item.level == '市级'
						// 	})
						// }else if(this.currentIndex == 3){
						// 	this.filterList = this.dataList.filter(item =>{
						// 		return item.level == '区级'
						// 	})
						// }else if(this.currentIndex == 4){
						// 	this.filterList = this.dataList.filter(item =>{
						// 		return item.level == '其他'
						// 	})
						// }
						this.totalSize = res.data.data.count.count
						this.doingNum = res.data.data.count.zjcount
						this.completeNum = res.data.data.count.wgcount
						this.overTimeNum = res.data.data.count.cscount
					}
				},
				complete: res =>{
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}
			});
		},
		toBottom(){  //滚动区域滚动到底部时
			++this.page
			this.getAllProject()
		},
		//根据value显示级别
		changeLevel(value){
			this.page = 1
			this.dataList = []
			this.currentIndex = value
			this.currentIndex2 = -1;
			this.getAllProject()
		},
		actionSheetCallback(index) {
			this.query = this.actionSheetList2[index].text;
		},
		
		// 获取两个日期之间的天数
		getDaysBetween(dateString1,dateString2){
		   var  startDate = Date.parse(dateString1);
		   var  endDate = Date.parse(dateString2);
		   var days=(endDate - startDate)/(1*24*60*60*1000);
		   return  days;
		},
		//根据条件筛选项目
		searchProject(val){
			this.page = 1
			this.dataList = [],
			this.currentIndex2 = -1;
			this.getAllProject()
		}
	},
}
</script>

<style lang="scss" scoped>
.project_gk_view{
	width: 100vw;
	min-height: 100vh;
	@include flex_layout_column;
	justify-content:flex-start;
	align-items: flex-start;
	.head{
		width: 100vw;
		background-color: #5c77ff;
		height:fit-content;
		>div{
			width: 100vw;
		}
		.head_content{
			padding-left:5px;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.return_bt{
				margin-right: 5px;
			}
			.centre{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 15px;
				color: #eeeeee;
			}
		}
	}
	.content{
		width: 100vw;
		.content_tab{
			background-color: #FFFFFF;
			height:50px;
			border-bottom: 1px solid #f0f0f0;
			box-sizing: border-box;
		}
		.content_tab2{
			background-color: #FFFFFF;
			height:50px;
			border-top: 1px solid #f0f0f0;
			box-sizing: border-box;
		}
		.content_count{
			@include flex_layout_row;
			justify-content: space-around;
			align-items: center;
			padding: 0px 15px;
			background-color: #ffffff;
			height: 60px;
			>.content_count_left{
				flex: 3;
				width: 0;
				@include flex_layout_row;
				justify-content: space-around;
				align-items: center;
				margin-right: 5px;
				>view{
					flex: 1;
					width: 0;
					text-align: center;
				}
				>.content_count_left_item{
					>.content_count_left_item_title{
						font-size: 16px;
						margin-bottom: 2px;
						font-weight: bold;
						color: #1a1a1a;
					}
					>.content_count_left_item_content{
						font-size: 12px;
						color: #484848;
					}
				}
			}
			>.content_count_right{
				flex: 1;
				width: 0;
				@include flex_layout_row;
				justify-content:flex-end;
				align-items: center;
			}
		}
	}
	.searchContainer{
		width: 100%;
		background-color: #fff;
		padding: 0 10px;
		display: grid;
		grid-template-columns: min-content 1fr;
		grid-gap: 15px;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #f0f0f0;
	}
}

</style>
